<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			在仅仅给b设置
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0; 时，此时b的尺寸表现为“格式化宽度和格式化高度”，也就是
			尺寸会自动的填充父级元素的尺寸。
			然后，再给b设置宽高
			height: 100px;
			width: 100px; 时，宽高被限制，原本应该填充的空间就闲置出来了
			这时候就可以用margin来支配这个闲置的空间，直接使用
			margin: auto; 就可以使元素在水平和垂直方向都居中
			*/
			.a{
				height: 200px;
				width: 200px;
				border: 1px solid;
				position: relative;
			}
			.b{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				height: 100px;
				width: 100px;
				margin: auto;
				background-color: darkgoldenrod;
			}
		</style>
	</head>
	<body>
		<div class="a">
			<div class="b"></div>
		</div>
	</body>
</html>
